<template>
  <div class="customer-edit">
    <el-dialog
      title="新增/编辑"
      :visible.sync="dialogVisible"
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      @close="editCancel"
    >
      <div class="dialog-body">
        <ul class="body-operation">
          <li>
            <span class="span1">账号:</span>
            <span class="span2">
              <el-input
                v-if="flag == 1"
                v-model="editInfo.account"
                placeholder="不超过20个字符"
                maxlength="20"
              ></el-input>
              <el-input
                v-else
                disabled
                v-model="editInfo.account"
                placeholder="不超过20个字符"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li v-if="flag == 1">
            <span class="span1">密码:</span>
            <span class="span2">
              <el-input
                v-model="editInfo.password"
                type="password"
                placeholder="不超过20个字符"
                maxlength="20"
              ></el-input>
            </span>
          </li>
          <li>
            <span class="span1">联系人:</span>
            <span class="span2">
              <el-input v-model="editInfo.linkedMan" placeholder="不超过10个汉字" maxlength="10"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">联系电话:</span>
            <span class="span2">
              <el-input v-model="editInfo.mobile" placeholder="请输入正确的手机号" maxlength="11"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">职务:</span>
            <span class="span2">
              <el-input v-model="editInfo.position" placeholder="不超过10个汉字" maxlength="10"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">公司:</span>
            <span class="span2">
              <el-input v-model="editInfo.companyName" placeholder="不超过20个汉字" maxlength="20"></el-input>
            </span>
          </li>
          <li>
            <span class="span1">公司地址:</span>
            <span class="span2">
              <el-input v-model="editInfo.companyAddress" placeholder="不超过50个字符" maxlength="50"></el-input>
            </span>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import md5 from "md5";
export default {
  props: ["message", "flag"],
  data() {
    return {
      dialogVisible: true,
      editInfo: {
        id: "",
        account: "",
        password: "",
        linkedMan: "",
        mobile: "",
        position: "",
        companyName: "",
        companyAddress: ""
      }
    };
  },
  methods: {
    //取消
    editCancel() {
      let that = this;
      that.editInfo = {
        id: "",
        account: "",
        password: "",
        linkedMan: "",
        mobile: "",
        position: "",
        companyName: "",
        companyAddress: ""
      };
      that.$emit("customerEdit", {});
    },
    //确定
    editSure() {
      let that = this;
      //账号
      if (!that.editInfo.account) {
        that.showMsg("请输入账号", "error");
        return;
      }
      //密码
      if (that.flag == "1") {
        if (!that.editInfo.password) {
          that.showMsg("请输入密码", "error");
          return;
        } else {
          if (!/^[\da-zA-Z!@#$%^&*]{6,20}$/.test(that.editInfo.password)) {
            that.showMsg("密码需由6-20位字母、数字、符号组成", "error");
            return;
          } else {
            that.editInfo.password = md5(that.editInfo.password);
          }
        }
      }
      //联系人
      if (!that.editInfo.linkedMan) {
        that.showMsg("请输入联系人", "error");
        return;
      }
      //联系电话
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(that.editInfo.mobile)) {
        that.showMsg("请输入正确的手机号", "error");
        return;
      }
      // //职务
      // if (!that.editInfo.position) {
      //   that.showMsg("请输入职务", "error");
      //   return;
      // }
      // //公司
      // if (!that.editInfo.companyName) {
      //   that.showMsg("请输入公司名称", "error");
      //   return;
      // }
      // //公司地址
      // if (!that.editInfo.companyAddress) {
      //   that.showMsg("请输入公司地址", "error");
      //   return;
      // }
      if (that.flag == "1") {
        console.log(that.editInfo);
        that.ajaxJson({
          url: "/customerManage/addOrEditCustomer",
          data: that.editInfo,
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("添加成功", "success");
              that.editCancel();
            } else {
              that.showMsg(res.message, "error");
            }
          }
        });
      } else if (that.flag == "2") {
        console.log(that.editInfo);
        that.ajaxJson({
          url: "/customerManage/addOrEditCustomer",
          data: that.editInfo,
          success: function(res) {
            if (res.code == "0") {
              that.showMsg("修改成功", "success");
              that.editCancel();
            } else {
              that.showMsg(res.message, "error");
            }
          }
        });
      }
    }
  },
  created() {
    let that = this;
    if (that.message) {
      that.editInfo = that.message;
    }
  }
};
</script>
<style lang="less">
.customer-edit {
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 60% !important;
          }
          .inputWidth {
            width: 120px;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
        }
      }
    }
  }
}
</style>
